<template>
	<view class="content">

		<view class="item_div_1">
			<view class="wb_status">
				运单状态
				<view style="margin: 0 24rpx 0 24rpx;">{{item.order_sn}}</view>
				<view v-if="item.status == 1" style="color: deepskyblue;">待接单</view>
				<view v-if="item.status == 2" style="color: orange;">已接单</view>
				<view v-if="item.status == 3" style="color: orangered;">拒绝接单</view>
				<view v-if="item.status == 4" style="color: darkgray;">绑定TMS</view>
			</view>
		</view>

		<view v-if="item.platform && item.platform_order" class="item_div_1">
			<view class="wb_status">
				TMS系统
				<view v-if="item.platform == 'cmm'" style="margin: 0 12rpx 0 24rpx;">车满满</view>
				<view v-if="item.platform == 'qqt'" style="margin: 0 12rpx 0 24rpx;">全球通</view>
				<view v-if="item.platform_order">{{item.platform_order}}</view>
			</view>
		</view>

		<view v-if="item.factor_name" class="item_div_1">
			<view class="wb_status">
				发货厂家
				<view style="margin: 0 0rpx 0 24rpx;">{{item.factor_name}}</view>
			</view>
		</view>

		<view class="item_div_1">
			<view class="addr_div">
				<view class="addr_item">发：{{item.sender_area}}{{item.sender_address}}</view>
				<view style="width: 1rpx;height: 100rpx;background: #ccc;"></view>
				<view class="addr_item">到：{{item.receiver_area}}{{item.receiver_address}}</view>
			</view>
		</view>
		<view class="item_div_1" style="padding: 0 0 24rpx 0;">
			<view class="wb_detail_txt">运单信息</view>
			<view class="wb_detail_div">
				<view class="wb_detail_item">
					发货人姓名：<view class="wb_detail_value">{{item.sender_name}}</view>
				</view>
				<view class="wb_detail_item">
					发货人电话：<view class="wb_detail_value">{{item.sender_mobile}}</view>
				</view>
				<view class="wb_detail_item">
					收货人姓名：<view class="wb_detail_value">{{item.receiver_name}}</view>
				</view>
				<view class="wb_detail_item">
					收货人电话：<view class="wb_detail_value">{{item.receiver_mobile}}</view>
				</view>
				<!-- <view class="wb_detail_item">
					参考运费：<view class="wb_detail_value">¥300</view>
				</view> -->
			</view>
		</view>

		<view class="item_div_1" style="padding: 0 0 24rpx 0;">
			<view class="wb_detail_txt">货物信息</view>
			<view class="wb_detail_div" v-for="(item,index) in item.goods">
				<view class="wb_detail_item">
					货物名称：<view class="wb_detail_value">{{item.goods_name}}</view>
				</view>
				<view class="wb_detail_item">
					货物数量：<view class="wb_detail_value">{{item.goods_num}}</view>
				</view>
				<view class="wb_detail_item">
					货物重量：<view class="wb_detail_value">{{item.goods_weight}}t</view>
				</view>
				<view class="wb_detail_item">
					货物体积：<view class="wb_detail_value">{{item.goods_volume}}m³</view>
				</view>
			</view>
		</view>

		<view v-if="!from && item.status == 1" class="op_btn_div">
			<view class="btn2" @click.stop="onConfirm(item)">订单确认</view>
		</view>
		<view v-if="!from && item.status == 2" class="op_btn_div">
			<view class="btn2" @click.stop="onBindTms(item)">绑定运单</view>
		</view>

	</view>
</template>

<script>
	import { getUInfo, isLeader } from '@/util/util.js'
	export default {
		data() {
			return {
				from: 0, // 来源标识 99 普通用户的运单列表 
				id: '', // 传值:订单id
				item: {},
			}
		},

		onLoad(opts) {
			this.id = opts.id
			this.from = opts.from
			console.log('waybill_detail.from = ', this.from);
		},

		mounted() {
			let that = this
			this.getDataInfo()

			// 事件总线:
			uni.$on('receiveOrder', data => {
				console.log('监听到事件来自receiveOrder,携带参数 data =', data);
				that.getDataInfo()
			})
			// 事件总线:
			uni.$on('postPlatform', data => {
				console.log('监听事件postPlatform,参数 data =', data);
				that.getDataInfo()
			})

		},

		methods: {

			// 绑定TMS
			onBindTms(item) {
				uni.navigateTo({ url: `/pages/mine/waybill/waybill_bind_tms?id=${item.id}` })
			},
			// 确认
			onConfirm(item) {
				uni.navigateTo({ url: `/pages/mine/waybill/waybill_confirm?id=${item.id}` })
			},

			// 接口:数据详情
			async getDataInfo() {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '加载中', mask: true, })
				let res = await this.$getOrderInfo({ token, order_id: this.id })
				if (res.code == 1) {
					this.item = res.data
				} else {
					this.$toast(res.msg)
				}
			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		width: 100%;
		height: 100%;
		padding: 0 0 24rpx 0;
		background: #f8f8f8;
	}

	.item_div_1 {
		width: calc(100% - 48rpx);
		margin: 24rpx 24rpx 0 24rpx;
		background: white;
		border-radius: 16rpx;
	}

	.wb_status {
		display: flex;
		align-items: center;
		padding: 24rpx 24rpx 24rpx 24rpx;
		font-weight: bold;
	}

	.addr_div {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.addr_item {
		width: calc(49%);
		text-align: center;
		padding: 24rpx;
	}

	.wb_detail_txt {
		padding: 24rpx 24rpx 24rpx 24rpx;
		font-weight: bold;
	}

	.wb_detail_div {
		display: flex;
		flex-direction: column;
		padding: 0 0 0 24rpx;
	}

	.wb_detail_item {
		display: flex;
		align-items: center;
		margin: 12rpx 0 0 0;
	}

	.wb_detail_value {
		color: #888;
	}

	/* 操作按钮容器 */
	.op_btn_div {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		font-size: 28rpx;
		font-weight: bold;
		margin: 80rpx 0 80rpx 0;
	}

	.btn2 {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #fdd30d;
		border: solid yellowgreen 1rpx;
		border-radius: 8rpx;
	}
</style>